<template>
	<div id="login">
		<img src="~@/assets/logo.png" alt="" class="bigEventLogo" />
		<el-card class="box-card">
			<div class="loginTitle"></div>
			<el-form ref="form" :model="user" :rules="loginRegRules">
				<el-form-item prop="username" key="1">
					<el-input
						v-model="user.username"
						placeholder="请输入用户名"
						class="el-icon-user"
					></el-input>
				</el-form-item>
				<el-form-item prop="password" key="2">
					<el-input
						type="password"
						v-model="user.password"
						placeholder="请输入密码"
						class="el-icon-unlock"
					></el-input>
				</el-form-item>
				<el-form-item v-if="isLogin === false" prop="repassword" key="3">
          <!-- <el-form-item prop="repassword"> -->
					<el-input
						type="password"
						v-model="user.repassword"
						placeholder="请确认密码"
						class="el-icon-unlock"
             
					></el-input>
				</el-form-item>
				<el-form-item v-else-if="isLogin">
          <!-- <el-form-item > -->
					<el-button
						type="primary"
						@click="loginSubmit"
						style="width:100%"
						>登录</el-button
					>
					<a href="javascript:;" class="loginAndReg" @click="logReg"
						>去注册账号</a
					>
				</el-form-item>
				<el-form-item v-if="isLogin === false">
					<el-button
						type="primary"
						@click="regSubmit"
						style="width:100%"
						>注册</el-button
					>
					<a href="javascript:;" class="loginAndReg" @click="logReg"
						>去登录</a
					>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>
<script>
import { regUser, login } from '@/api/login'

export default {
	name: 'LoginPage',
	data() {
		const checkPwd = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'))
			} else if (value !== this.user.password) {
				callback(new Error('两次密码不一致'))
			} else {
				callback()
			}
		}
		return {
			user: {
				username: '',
				password: '',
				repassword: '',
			},
			isLogin: true, //login状态

			loginRegRules: {
				username: [
					{
						required: true,
						message: '用户名不能为空',
						trigger: 'blur',
					},
				],
				password: [
					{
						required: true,
						message: '密码不能为空',
						trigger: 'blur',
					},
					{
						pattern: /^[\S]{6,12}$/,
						message: '密码长度在6-12字符之间',
						trigger: 'blur',
					},
				],
				repassword: [
					{
						required: true,
						message: '确认密码不能为空',
						trigger: 'blur',
					},
					{ validator: checkPwd, trigger: 'blur' },
				],
			},
		}
	},

	methods: {
		logReg() {
			this.isLogin = !this.isLogin
			// 清空表单的值
			this.user.username = ''
			this.user.password = ''
			this.user.repassword = ''
			// 移除校验结果
			this.$refs['form'].clearValidate()
		},
		// 登录功能
		async loginSubmit() {
			// 未聚焦时点击登录时的表单验证
			this.$refs['form'].validate((isOk) => {
				if (isOk) {
					console.log('ok')
				} else {
					return false
				}
			})
			//  登录的后台请求
			try {
				const { data } = await login(this.user)
        if(data.code==1){
         this.$message('登录失败')
         this.$store.commit('setToken',null)
        //  this.$router.push('/')
       }else{
         this.$message('登录成功')
        // 登录成功跳转到index
        this.$router.push('/index')
        // 登录成功后存储token
     this.$store.commit('setToken',data.token)
       }
			
			} catch (err) {
				this.$message('登录失败')
			} 
		},
		// 注册
		async regSubmit() {
			// 未聚焦时点击注册时的表单验证
			this.$refs['form'].validate((isOk) => {
				if (isOk) {
					console.log('ok')
				} else {
					return false
				}
			})
			//  注册的后台请求
			try {
				const { data } = await regUser(this.user)
				this.$message('注册成功')
				console.log(data)
			} catch (err) {
				if (this.user.password !== this.user.repassword) {
					return this.$message('两次密码不一致')
				}
				this.$message('注册失败')
			}
		},
	},
}
</script>

<style >
#login{
	width: 100%;
	height: 100vh;
	background: url('~@/assets/login_bg.jpg') no-repeat center;
	background-size: cover;
}

.el-card /deep/ .el-card__body{
  padding: 0;
}
.el-input__inner{
  padding: 0 20px;

}

a{
  text-decoration: none;
  color: #585b5a;
}
.bigEventLogo {
	position: relative;
	left: 130px;
}

.box-card {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 400px;
	height: 350px;
	padding-left: 30px;
	padding-right: 30px;
}

.loginTitle {
	height: 60px;
	background: url('~@/assets/login_title.png') no-repeat center;
}
.el-icon-user:before,
.el-icon-unlock:before {
	position: absolute;
	top: 12px;
	left: 5px;
}
.loginAndReg {
	position: absolute;
	top: 50px;
	right: 0;
}
</style>
